今天要分享的是事件傳遞的機制，相信初學的大家聽到比較多的應該是捕獲、冒泡、stopPropogation、preventDefault 之類的字眼。

當初同學在討論區發問，這一題主要是不清楚 stopPropogation 和 preventDefault 的差別。

我自己區分兩者的方式就是 stopPropogation 擋事件傳遞，preventDefault 擋瀏覽器預設行為。
假如分不清楚兩個差別的話，那就全部都擋比較安心。

preventDefault 主要會用到的情境是 <a>, <input type="submit"> 點擊觸發特殊效果的時候，因為 <a> 連結會造成頁面跳轉，<input type="submit"> 送出按紐也會造成頁面跳轉。如果想要實作一些不一樣的效果，通常會把瀏覽器預設行為擋掉，避免干擾。

捕獲和冒泡的使用時機，主要是在事件代理的時候，這算是進階用法。在課程中做 todo list 的時候，如果每一個待辦事項的按紐都要掛事件監聽會很麻煩，所以這時候就會希望統一把這些按鈕要做的事情統一給上一層的母元素 (父元素?) 處理，這樣子就不用那麼麻煩要一直新增事件監聽。

const btn = doctype.querySelector(".delete-btn")
btn.addEventListener("click", function removeItem(e) {
  let item = e.target.closest(".item")
  if (item) item.remove()
})

原本的寫法，每一個按鈕在生成的時候都要新增一次，而且在刪除項目的時候還要解除事件監聽，有點麻煩。

const list = doctype.querySelector(".list")
list.addEventListener("click", function removeItem(e) {
  if (e.target.matches(".delete-btn")) {
    let item = e.target.closest(".item")
    if (item) item.remove()
  }
})

事件代理的寫法，事件監聽掛在上一層的列表元素。執行前要先檢查觸發事件的 class 是不是原本要執行的那一個 class？剩下要做的事情基本上也差不多，其實也沒想像中那麼複雜，欸嘿 （<ゝω・)☆

剩下就是 this 濫用的問題，我自己用事件監聽的時候是沒有使用 this 的，建議盡量用 e.target 就好。因為這是一個蠻討厭的坑，所以我都不太用 this 的。

以上，這就今天的分享，洩洩縮看 <(_ _)>